<template>
    <div class="container">
       <m-header :title="title"></m-header>
       <div style="position: absolute;top: 44px;bottom: 55px;width: 100%;">
         <cube-scroll class="content" :options="options" @pulling-up="loadNextPage" @pull-down="refreshAll" ref="scroll" :data="booklist">
             <div class="item" v-for="book in booklist">
                 <img :src="book.book_pic"/>
                 <div class="info">
                   <div class="name">书名：{{book.book_name}}</div>
                   <div class="price">价格：${{book.book_price}}</div>
                   <div class="type">
                     <span :style="{backgroundColor:decideTypeColor(book.book_type)}">
                       {{book.book_typeName}}
                     </span>
                    </div>
                    <div class="buy" @click="addToCart(book)">
                      加入购物车
                    </div>
                 </div> 
             </div>
         </cube-scroll>
       </div>
       <div class="shop-detail">
         <div class="shop-cart" :style="topStyle" @click.stop="toggleShop" v-show="orders.length">
           <i  class="fa fa-shopping-cart"></i>
         </div>
         <div class="title"  v-show="shopShow && orders.length">购物车</div> 
         <div class="order-list" v-show="shopShow && orders.length">
           <div class="order-item" v-for="order in orders">
             <div class="name">{{order.book_name}}</div>
             <div class="price">￥{{order.book_price*order.order_num}}</div>
             <div class="num-change">
               <i class="fa fa-chevron-left" @click.stop="removeFromCart(order)"></i>
               <span v-html="order.order_num"></span>
               <i class="fa fa-chevron-right" @click.stop="addToCart(order)"></i>
             </div>
           </div>
         </div>
       </div>
       

    </div>
</template>

<script type="text/ecmascript-6">
import { getUser, getBooks } from "api/api";
import MHeader from "base/m-header/m-header";

import { mapGetters, mapActions } from "vuex";

export default {
  created() {
    this._getBook();
    this._getUser();
  },
  data() {
    return {
      title: "商品列表",
      booklist: [],
      shopShow: false
    };
  },
  methods: {
    _getUser() {
      getUser().then(res => {
        console.log("前端接盘数据", res);
      });
    },
    _getBook() {
      getBooks().then(res => {
        console.log("接盘书籍假数据", res);
        this.booklist = this.booklist.concat(res.data);
      });
    },

    loadNextPage() {
      console.log("加载更多");
    },
    refreshAll() {
      console.log("刷新所有");
    },

    toggleShop() {
      this.shopShow = !this.shopShow;
    },

    // 添加到购物车
    addToCart(book) {
  
      var order = Object.assign(
        {},
        {
          book_id: book.book_id,
          book_name: book.book_name,
          book_type: book.book_type,
          book_typeName: book.book_typeName,
          book_price:book.book_price
        }
      );

      this.saveUserOrder(order);
    },
    // 移出购物车
    removeFromCart(book) {
      this.deleteUserOrder(book)
    },

    decideTypeColor(type) {
      switch (type) {
        case 1:
          return "#c41200";
          break;
        case 2:
          return "#0ba6ab";
          break;
        case 3:
          return "#febd17";
          break;
        default:
          return "#00bdf6";
          break;
      }
    },

    ...mapActions(["saveUserOrder","deleteUserOrder"])
  },
  computed: {
    options() {
      return {
        pullUpLoad: true,
        pullDownRefresh: true
      };
    },
    topStyle() {
      return this.shopShow ? "top:-20px" : "top:-50px";
    },
    ...mapGetters(["orders"])
  },
  components: {
    MHeader
  }
};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~common/stylus/variable';
@import '~common/stylus/mixins';

.container {
  .shop-detail {
    position: absolute;
    width: 100%;
    bottom: 55px;
    z-index: 1;
    background: #fff;

    .shop-cart {
      position: absolute;
      top: -50px;
      width: 40px;
      right: 17px;
      height: 40px;
      background: $color-main;
      border-radius: 50%;
      text-align: center;
      line-height: 40px;

      i {
        font-size: 20px;
      }
    }

    .title {
      color: $color-main;
      line-height: 44px;
      height: 44px;
      box-sizing: border-box;
      background: #f8f8f1;
      font-size: 20px;
      text-align: left;
      padding-left: 15px;
    }
    .order-list {
      .order-item {
        font-size 13px  
        text-align left 
        display flex
        padding 10px 15px
        border-bottom 1px solid #f1f1f1
        .name {
          width 50%
          ellipsis()
          margin-right 10px
        }
        .price {
          flex:1
        }
        .num-change {
          i {

          }
          span {

          }
        }
      }
    }
  }

  .content {
    .item {
      display: flex;
      padding: 10px 10px 0;
      margin-bottom: 15px;

      img {
        width: 90px;
        height: 100px;
        display: block;
        min-width: 90px;
      }

      .info {
        color: $color-font-1;
        padding: 0 10px 0 10px;
        flex: 1;
        text-align: left;
        min-width: 50px;

        div {
          width: 95%;
        }

        .name {
          font-size: 14px;
          ellipsis();
          margin: 7px 0 7px;
        }

        .price {
          font-size: 14px;
        }

        .type {
          margin: 7px 0;

          span {
            padding: 4px 6px;
            display: inline-block;
            border-radius: 4px;
            color: #fff;
          }
        }

        .buy {
          display: inline-block;
          font-size: 14px;
          width: auto;
          color: $color-main;
        }
      }
    }
  }
}
</style>
